<template>
	<div class="SideBar">
		<div class="title_avatar">
			<el-avatar :size="'large'" :src="require('../assets/imgs/avatar.png')"></el-avatar>
			<span>admin</span>
		</div>
		<el-aside width="200px" height="100%">
			<el-menu 
			:default-active="defalActTab"
			:default-openeds="['1']" 
			@select="handleSelect"
			background-color="#2a58ad"
			text-color="#fff">
				<!-- 智慧路灯 -->
				<el-submenu index="1">
					<template slot="title">智慧路灯</template>

					<el-submenu index="1-1">
					    <template slot="title">设备管理</template>
					    <el-menu-item index="1-1-1">设备首页</el-menu-item>
					    <el-menu-item index="1-1-2">设备列表</el-menu-item>
					</el-submenu>

					<el-submenu index="1-2">
					    <template slot="title">场景控制</template>
					    <el-menu-item index="1-2-1">场景管理列表</el-menu-item>
					    <el-menu-item index="1-2-2">场景执行记录</el-menu-item>
					    <el-menu-item index="1-2-3">添加场景</el-menu-item>
					    <el-menu-item index="1-2-4">定时场景</el-menu-item>
					    <el-menu-item index="1-2-5">选择设备</el-menu-item>
					    <el-menu-item index="1-2-6">条件场景</el-menu-item>
					    <el-menu-item index="1-2-7">场景执行记录提示</el-menu-item>
					    <el-menu-item index="1-2-8">场景详情</el-menu-item>
					</el-submenu>
					
					<el-menu-item index="1-3">智慧照明</el-menu-item>
					<el-menu-item index="1-4">环境监测</el-menu-item>
					<el-menu-item index="1-5">视频监控</el-menu-item>
					<el-menu-item index="1-6">信息发布</el-menu-item>
					<el-menu-item index="1-7">公共广播</el-menu-item>
				</el-submenu>
				
				<!-- 智能识别监控 -->
				<!-- <el-submenu index="2">
					<template slot="title"><i></i>智能识别监控</template>
					<el-menu-item index="2-1"><i></i>学员报到</el-menu-item>
					<el-menu-item index="2-2"><i></i>智慧考勤</el-menu-item>
				</el-submenu> -->
				<!-- 智能垃圾桶 -->
				<!-- <el-menu-item index="3"><i></i>智能垃圾桶</el-menu-item> -->
				<!-- 健康一体机 -->
				<!-- <el-menu-item index="4"><i></i>健康一体机</el-menu-item> -->
				<!-- 无人机自动巡航 -->
				<!-- <el-submenu index="5">
					<template slot="title"><i></i>无人机自动巡航</template>
					<el-menu-item index="5-1"><i></i>无人机控制</el-menu-item>
					<el-menu-item index="5-2"><i></i>飞行记录</el-menu-item>
				</el-submenu> -->
			</el-menu>
		</el-aside>
	</div>
</template>
<script>
	import BScroll from 'better-scroll'
	export default {
		data() {
			return {
				defalActTab: '1-1-1',

				tabs: [
					{name: '设备管理',src: '/'},
					{name: '场景控制',src: '/'},
					{name: '智慧照明',src: '/light'},
					{name: '环境监测',src: '/envir'},
					{name: '视频监控',src: '/monitor'},
					{name: '信息发布',src: '/publish'},
					{name: '公共广播',src: '/Radio'}
				],

				tabsSrc: {
					'1-1-1': '/machinestatus',
					'1-1-2': '/machineList',
					'1-2-1': '/',
					'1-2-2': '/',
					'1-2-3': '/',
					'1-2-4': '/',
					'1-2-5': '/',
					'1-2-6': '/',
					'1-2-7': '/',
					'1-2-8': '/',
					'1-3': '/light',
					'1-4': '/envir',
					'1-5': '/monitor',
					'1-6': '/publish',
					'1-7': '/Radio'
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				//实现BScroll为单例
				if(!this.SideBar) {
					this.SideBar = new BScroll('.el-aside',{
						mouseWheel: true,
						// scrollbar: {
						// 	fade: true,
						// 	interactive: false
						// }
					})
				} else {
					//让滚动条刷新，重新统计内容的高度
					this.SideBar.refresh()
				}
			})
		},
		methods: {
			handleSelect(key) {
				this.$router.push(this.tabsSrc[key])
			}
		}
	}
</script>
<style>
	.SideBar {
		width: 200px;
		height: calc(100% - 161px);
		float: left;
		background-color: #2a58ad;
	}
	.SideBar .el-avatar--large {
		width: 60px;
		height: 60px;
		margin-bottom: 10px;
	}
	.SideBar .title_avatar {
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: #fff;
	}
	.SideBar .el-aside {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: rgb(42, 88, 173);

	}
	.SideBar .el-menu {
		width: 100%;
	}
	.SideBar .iconfont {
		font-size: 29px;
	}
	.SideBar .el-menu-item {
		width: 100%;
		text-align: center;
	}
	.SideBar .el-submenu__title {
	}
	.SideBar .el-submenu__title i {
		color: #fff;
		font-size: 18px;
	}
</style>